<template>
  <div ref="refChart" class="chart"></div>
</template>
<script setup>
import { ref, defineProps, onMounted, onBeforeUnmount, watch } from 'vue';
import * as eCharts from 'echarts';
import {getScale, calculateChartGrid} from './ChartUtils.js';
const refChart = ref(null);

const props = defineProps({
  xAxis: {
    type: Array,
    default: () => []
  },
  data: {
    type: Array,
    default: () => []
  },
  colorArray: {
    type: Array,
    default: () => ['rgba(0, 190, 255, 0.35)', 'rgba(6, 90, 126, 0.35)', 'rgba(9, 28, 47, 0.35)']
  },
  serieName: {
    type: String,
    default: ''
  },
   /**文字大小 */
  fontSize:{
    type: Number,
    default: 14
  }
});

watch(() => props.data, (v) => {
  if (chart) {
    const option = getOption();
    chart.setOption(option, true);
  }
});

let chart;
onMounted(() => {
  const barDom = refChart.value;
  chart = eCharts.init(barDom);
  const { data } = props;
  if (data.length > 0) {
    const option = getOption();
    chart.setOption(option);
  }
  window.addEventListener('resize', resize);
});

/**组件取消挂载之前 */
onBeforeUnmount(()=>{
  window.removeEventListener('resize', resize);
})

/**图表大小变化重新渲染 */
const resize = () =>{
  if (chart) {
    const { data, colorArray } = props;
    let option = getOption(data, colorArray);
    chart.setOption(option, true);
    chart.resize();
  }
}

/**获取图表默认配置 */
const getOption = ()=>{
  const { xAxis, data, colorArray, serieName } = props;
  const series = getSerie(serieName, data, colorArray);
  return {
    tooltip: {
      trigger: 'axis'
    },
    grid: calculateChartGrid(),
    textStyle: {
      fontSize: getScale()*props.fontSize,
      color: 'white'
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: 'white'
        }
      },
      splitLine: {
        show: false
      },
      axisLabel:{
        fontSize: getScale()*props.fontSize
      }
    },
    xAxis: {
      data: xAxis,
      axisLine: {
        show: true,
        lineStyle: {
          color: 'white'
        }
      },
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          color: 'white'
        }
      },
      axisLabel:{
        fontSize: getScale()*props.fontSize
      }
    },
    series: [
      series
    ]
  };
}
/**
 * 深度合并对象
 */
const deepObjectMerge = (targ, source) => {
  const target = targ;
  for (const key in source) {
    if (key.hasOwnProperty) {
      target[key] =
        target[key] && typeof target[key] === 'object'
          ? deepObjectMerge(target[key], source[key])
          : (target[key] = source[key]);
    }
  }
  return target;
};
/**
 * 组装图表series值
 */
const getSerie = (name, data, color) => {
  const _data = data.map((item) =>{return {value:item}});
  _data[data.length-1].symbol = 'circle';
  _data[data.length-1].symbolSize = getScale()*10;
  return {
    type: 'line',
    data:_data,
    smooth: true,
    symbol: 'none',
    itemStyle:{
      color: getLineColor(color[0]),
    },
    lineStyle: {
      width: 1
    },
    name,
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: color[0]},
          { offset: 0.5, color: color[1] },
          { offset: 1, color: color[2] },
        ]
      }
    }
  };
};

/**获取线条颜色 */
const getLineColor = (color) =>{
  let ca = color.split(',');
  ca[3] = ' 1)';
  return ca.join(',');
}
</script>
<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
